<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body
        {
            background-color: #000;
        }
        .x-keyboard
        {
            background-color: #555;
            padding: 10px;
            display: inline-block;
        }
        .x-keyboard b
        {
            background-color: #000;
            color: #ccc;
            width: 30px;
            height: 30px;
            line-height: 30px;
            margin: 0px 2px 2px 0px;
            text-align: center;
            font-size: 9px;
            font-weight: normal;
            display: block;
        }
        .x-keyboard .x-pressed
        {
            background-color: #efefef;
            color: #000000;
        }
        .x-keyboard .x-align-left
        {
            text-align: left;
            text-indent: 10px;
        }
        .x-keyboard .x-align-right
        {
            text-align: right;
            padding-right: 10px;
            box-sizing: border-box;
        }
        .x-keyboard .x-2b
        {
            width: 45px !important;
        }
        .x-keyboard .x-3b
        {
            width: 62px !important;
        }
        .x-keyboard .x-4b
        {
            width: 70px !important;
        }
        .x-keyboard .x-spacebar
        {
            width: 237px !important;
        }
        .x-keyboard .x-4b:last-child
        {
            width: 69px !important;
        }
        .x-keyboard b, .x-keyboard i
        {
            float: left;
        }
        .x-keyboard b:hover
        {
            cursor: pointer;
            background-color: #236;
        }
        .x-keyboard i
        {
            width: 10px;
            height: 30px;
            margin: 0px 2px 2px 0px;
        }
        .x-keyboard sup
        {
            font-size: 7px;
            color: #666;
            margin-left: 4px;
        }
        .x-keyboard .x-shiftkey, .x-keyboard .x-shiftkey b
        {
            line-height: 24px;
        }
        .x-keyboard .x-funcs
        {
            margin-bottom: 20px;
        }
        .x-keyboard .x-funcs i
        {
            width: 13px;
        }
        .x-keyboard .x-kb-main, .x-keyboard .x-kb-ctrl
        {
            display: inline-block;
            float: left;
        }
        .x-keyboard .x-kb-ctrl
        {
            margin-left: 20px;
        }
        .x-keyboard .x-dir
        {
            margin-top: 32px;
            margin-left: 24px;
            width: 100px;
        }
        .x-keyboard .x-dir b
        {
            xfloat: none;
            xdisplay: inline-block;
            text-align: center;
            font-size: 32px;
        }
        .x-keyboard .x-dir s
        {
            width: 30px;
            height: 30px;
            float: left;
            display: inline-block;
            margin: 0px 2px 2px 0px;
        }
        .clearfix
        {
            clear: both;
        }
    </style>
</head>
<body>
<div class="x-keyboard">
    <div class="x-funcs">
        <b class="x-2b" x-key="27">ESC</b>
        <i></i>
        <b class="" x-key="112">F1</b>
        <b class="" x-key="113">F2</b>
        <b class="" x-key="114">F3</b>
        <b class="" x-key="115">F4</b>
        <i></i>
        <b class="" x-key="116">F5</b>
        <b class="" x-key="117">F6</b>
        <b class="" x-key="118">F7</b>
        <b class="" x-key="119">F8</b>
        <i></i>
        <b class="" x-key="120">F9</b>
        <b class="" x-key="121">F10</b>
        <b class="" x-key="122">F11</b>
        <b class="" x-key="123">F12</b>
        <div class="clearfix"></div>
    </div>
    <div>
        <div class="x-kb-main">
            <div>
                <b class="x-shiftkey" x-key="192">`<sup>~</sup></b>
                <i></i>
                <b class="x-shiftkey" x-key="49">1<sup>!</sup></b>
                <b class="x-shiftkey" x-key="50">2<sup>@</sup></b>
                <b class="x-shiftkey" x-key="51">3<sup>#</sup></b>
                <b class="x-shiftkey" x-key="52">4<sup>$</sup></b>
                <b class="x-shiftkey" x-key="53">5<sup>%</sup></b>
                <b class="x-shiftkey" x-key="54">6<sup>^</sup></b>
                <b class="x-shiftkey" x-key="55">7<sup>&amp;</sup></b>
                <b class="x-shiftkey" x-key="56">8<sup>*</sup></b>
                <b class="x-shiftkey" x-key="57">9<sup>(</sup></b>
                <b class="x-shiftkey" x-key="48">0<sup>)</sup></b>
                <b class="x-shiftkey" x-key="189">-<sup>_</sup></b>
                <b class="x-shiftkey" x-key="187">=<sup>+</sup></b>
                <b class="x-2b x-align-right" x-key="8">BACK</b>
                <div class="clearfix"></div>
            </div>
            <div>
                <b class="x-2b x-align-left" x-key="9">TAB</b>
                <i></i>
                <b class="" x-key="81">Q</b>
                <b class="" x-key="87">W</b>
                <b class="" x-key="69">E</b>
                <b class="" x-key="82">R</b>
                <b class="" x-key="84">T</b>
                <b class="" x-key="89">Y</b>
                <b class="" x-key="85">U</b>
                <b class="" x-key="73">I</b>
                <b class="" x-key="79">O</b>
                <b class="" x-key="80">P</b>
                <b class="x-shiftkey" x-key="219">[<sup>{</sup></b>
                <b class="x-shiftkey" x-key="221">]<sup>}</sup></b>
                <b class="x-shiftkey" x-key="220">\<sup>|</sup></b>
                <div class="clearfix"></div>
            </div>
            <div>
                <b class="x-2b x-align-left" x-key="20">CAPS</b>
                <i></i>
                <b class="" x-key="65">A</b>
                <b class="" x-key="83">S</b>
                <b class="" x-key="68">D</b>
                <b class="" x-key="70">F</b>
                <b class="" x-key="71">G</b>
                <b class="" x-key="72">H</b>
                <b class="" x-key="74">J</b>
                <b class="" x-key="75">K</b>
                <b class="" x-key="76">L</b>
                <b class="" x-key="186">;<sup>:</sup></b>
                <b class="" x-key="222">'<sup>"</sup></b>
                <b class="x-3b x-align-right" x-key="13">ENTER</b>
            </div>
            <div>
                <b class="x-4b x-align-left" x-key="16">SHIFT</b>
                <i></i>
                <b class="" x-key="90">Z</b>
                <b class="" x-key="88">X</b>
                <b class="" x-key="67">C</b>
                <b class="" x-key="86">V</b>
                <b class="" x-key="66">B</b>
                <b class="" x-key="78">N</b>
                <b class="" x-key="77">M</b>
                <b class="" x-key="188">,<sup>&lt;</sup></b>
                <b class="" x-key="190">.<sup>&gt;</sup></b>
                <b class="" x-key="191">/<sup>?</sup></b>
                <b class="x-4b x-align-right" x-key="16">SHIFT</b>
            </div>
            <div>
                <b class="x-2b x-align-left" x-key="17">CTRL</b>
                <i></i>
                <b class="x-2b" x-key="18">ALT</b>
                <i></i>
                <b class="x-spacebar" x-key="32">SPACE</b>
                <i></i>
                <b class="x-2b" x-key="18">ALT</b>
                <i></i>
                <b class="x-2b x-align-right" x-key="17">CTRL</b>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="x-kb-ctrl">
            <div>
                <b class="x-2b" x-key="45">INS</b>
                <b class="x-2b" x-key="36">HOME</b>
                <b class="x-2b" x-key="33">PGUP</b>
                <div class="clearfix"></div>
            </div>
            <div>
                <b class="x-2b" x-key="46">DEL</b>
                <b class="x-2b" x-key="35">END</b>
                <b class="x-2b" x-key="34">PGDN</b>
                <div class="clearfix"></div>
            </div>
            <div class="x-dir">
                <s></s>
                <b class="" x-key="38">▴</b>
                <s></s>
                <div class="clearfix"></div>
                <b class="" x-key="37">◂</b>
                <b class="" x-key="40">▾</b>
                <b class="" x-key="39">▸</b>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    var keys = [];
    $(document).ready(function()
    {
        $('.x-keyboard b').each(function()
        {
            $(this).removeClass('x-pressed');
        });
        $('.x-keyboard b').click(function()
        {
            var btn = $(this);
            var key = btn.attr('x-key');
            if (btn.hasClass('x-pressed'))
            {
                var newKeyList = [];
                for (var i = 0; i < keys.length; i++)
                {
                    if (keys[i] != key) newKeyList.push(keys[i]);
                }
                keys = newKeyList;
                btn.removeClass('x-pressed');
            }
            else
            {
                keys.push(key);
                btn.addClass('x-pressed');
            }
        });
    });
</script>
</body>
</html>